<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="author" content="order by dede58.com"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags
    -->
    <title>Float-Admin</title>

    <!-- Common plugins -->
    <link href="${pageContext.request.contextPath}../../static/css/bootstrap.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}../../static/css/simple-line-icons.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}../../static/css/font-awesome.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}../../static/css/pace.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}../../static/css/jasny-bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="${pageContext.request.contextPath}../../static/css/nanoscroller.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}../../static/css/metismenu.min.css">
    <!-- dataTables -->
    <link href="${pageContext.request.contextPath}../../static/css/jquery.datatables.min.css" rel="stylesheet"
          type="text/css">
    <link href="${pageContext.request.contextPath}../../static/css/responsive.bootstrap.min.css" rel="stylesheet"
          type="text/css">

    <!--template css-->
    <link href="${pageContext.request.contextPath}../../static/css/style.css" rel="stylesheet">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="${pageContext.request.contextPath}../../static/js/html5shiv.min.js"></script>
    <script src="${pageContext.request.contextPath}../../static/js/respond.min.js"></script>
    <![endif]-->
</head>
<body>

<!--page header start-->
<div class="page-header">
    <div class="row">
        <div class="col-sm-6">
            <h4>生产管理</h4>
        </div>
        <div class="col-sm-6 text-right">
            <ol class="breadcrumb">
                <li><a href="javascript: void(0);"><i class="fa fa-home"></i></a></li>
                <li>E-commerce</li>
                <li>仓库</li>
            </ol>
        </div>
    </div>
</div>
<!--page header end-->


<!--start page content-->
<div class="row tanbox">
    <div class="col-md-12">
        <div class="panel panel-default">
            <div class="panel-body">
                <table id="datatable1" class="table table-striped dt-responsive nowrap table-hover">
                    <thead>
                    <tr>
                        <th style="width:100px">
                            <strong>机器编号</strong>
                        </th>
                        <th>
                            <strong>车间号</strong>
                        </th>
                        <th>
                            <strong>生产线名称</strong>
                        </th>
                        <th>
                            <strong>机器名称</strong>
                        </th>
                        <th>
                            <strong>机器状态</strong>
                        </th>
                        <th>
                            <strong>负责人</strong>
                        </th>
                        <th>
                            <strong>生产线状态</strong>
                        </th>
                    </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
</div>
<!--end page content-->
<!--Start footer-->
<!--end footer-->


<!--Common plugins-->
<script src="${pageContext.request.contextPath}../../static/js/jquery.min.js"></script>
<script src="${pageContext.request.contextPath}../../static/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}../../static/js/pace.min.js"></script>
<script src="${pageContext.request.contextPath}../../static/js/jasny-bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}../../static/js/jquery.slimscroll.min.js"></script>
<script src="${pageContext.request.contextPath}../../static/js/jquery.nanoscroller.min.js"></script>
<script src="${pageContext.request.contextPath}../../static/js/metismenu.min.js"></script>
<script src="${pageContext.request.contextPath}../../static/js/float-custom.js"></script>
<!-- Datatables-->
<script src="${pageContext.request.contextPath}../../static/js/jquery.datatables.min.js"></script>
<script src="${pageContext.request.contextPath}../../static/js/datatables.responsive.min.js"></script>
</body>
<script>
    getProductionlinesName()

    function getProductionlinesName() {
        $.ajax({
            "url": "production/getProductionlinesName",
            "type": "get",
            "data": {},
            "dataType": "json",
            "success": function (result) {
                console.log(result)
                let cc = "";
                for (let index in result) {
                    cc += `
    <button onclick="getSaleProducts(${result[index].productionLineId})">${result[index].productionLineName}</button>
    `
                }
                console.log(cc)
                $(".tanbox").before(cc)
            },
            "error": function () {
                alert("出错了")
            }
        })
    }
</script>
<script>
    let dataTable = $('#datatable1').DataTable({
        // 设置列定义
        columns: [
            {data: 'productionLineLevel'},
            {data: 'productionLineName'},
            {data: 'machineToolName'},
            {data: 'productionLineStatu'},
            {data: 'supervisor'},
            {data: 'status'}
        ]
    });

    function getSaleProducts(id) {
        $.ajax({
            "url": "production/getProductionlines", // 要提交的URL路径
            "type": "get", // 发送请求的方式
            "data": {productionLineId: id}, // 要发送到服务器的数据
            "dataType": "json", // 期望接受的数据格式
            "success": function (result) { // 请求成功后要执行的代码
                let Products = "";
                for (let index in result) {
    let haohaohao = result[index].productionLineStatu
    let statuText;
    if (haohaohao === 0) {
    statuText = "待机"
    } else if (haohaohao === 1) {
    statuText = "生产中"
    }
                    Products += `<tr>
        <td>${result[index].id}</td>
        <td>${result[index].productionLineLevel}</td>
        <td>${result[index].productionLineName}</td>
        <td>${result[index].machineToolName}</td>
        <td>${statuText}</td>
        <td>${result[index].supervisor}</td>
        <td>${result[index].status}</td>
        </tr>
        `
                }
                if (dataTable) {
                    dataTable.destroy(); // 销毁旧的DataTable实例
                }
                dataTable.rows.add(result).draw();
                $('#datatable1 tbody').html(Products); // 更新表格数据
                dataTable = $('#datatable1').DataTable({
                    "order": [[0, 'asc']], // 默认按第一列升序排序
                    "paging": true // 启用分页功能，根据需求设置其他分页选项
                });

            }, "error": function () {
                alert("数据响应时间过长！请重新加载")
            }
        });
    }

</script>
</html>